Learn how to design a clock with HTML and CSS. Add hour and minute hands to create a functional clock with CSS animation.
Table of Contents
A clock shape with minute and hour hands is a visual representation of a clock or timepiece, typically displayed on a screen. It consists of a circular shape that represents the clock face, with two hands pointing to the current time. The shorter hand, known as the minute hand, points to the current minute, while the longer hand, known as the hour hand, points to the current hour.
This is a pure CSS clock shape. It uses CSS animations and shapes, without any images or JavaScript. It's only a clock shape, not a real-time working clock.
Watch more tutorials on my YouTube Channel: Watch Here.
Let's start making an amazing clock shape with a minute and hour hand using HTML and Pure CSS step by step.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our clock shape. Below is a breakdown of the code:
1. HTML Structure
<!DOCTYPE html>
<html lang="en">- Defines the document type as HTML5.
- Sets the language of the page to English (en).
<head>
<title>Clock Shape</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
</head>- The
<title>sets the webpage title to "Clock Shape". - The
<meta charset="UTF-8" />ensures proper character encoding. - The
<meta name="viewport" content="width=device-width" />makes the webpage responsive on different devices. - The
<link rel="stylesheet" href="styles.css" />links an external CSS file named styles.css, which will define the clock's appearance.
2. Body Section
<body>
<div class="clock">
<span></span>
</div>
</body>- A
<div>element with the class clock acts as the main container for the clock. - A
<span>element inside the clock<div>, which might be used for decoration, a center point, or clock hands in the CSS.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our clock shape and clock hands. Below is a detailed explanation:
1. General Styles
body{
margin: 0;
padding: 0;
background: #fff;
}- Removes default margin and padding.
- Sets the background color to white (#fff).
2. Clock Styling
.clock{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 15px solid #8a5fff;
border-radius: 50%;
background: url(face.png);
background-size: cover;
box-shadow: -2px 2px 0 #e23232,
inset 0 0 20px rgba(0, 0, 0, 0.5);
}- Positions the clock at the center of the screen using absolute positioning and transform: translate(-50%, -50%).
- Sets the size of the clock to 200px x 200px.
- Adds a purple border (#8a5fff) of 15px, making it look like a clock frame.
- Applies a circular shape using border-radius: 50%.
- Uses an image (face.png) as the clock background.
- Adds a shadow effect:
- Outer shadow (#e23232) gives a 3D effect.
- Inner shadow (rgba(0, 0, 0, 0.5)) adds depth inside.
3. Clock Hands
Hour Hand (Shorter Hand)
.clock::before{
content: '';
position: absolute;
left: 50%;
width: 40%;
height: 6px;
background: #262626;
top: calc(50% - 3px);
border-radius: 3px;
animation: animate 4s linear infinite;
transform-origin: left;
}- Creates an hour hand using ::before.
- Positioned in the center of the clock.
- Width: 40% of the clock, height: 6px (thin bar).
- Uses transform-origin: left; so it rotates from the left end.
- Rotates 360° in 4 seconds using:
@keyframes animate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}Minute Hand (Longer Hand)
.clock::after{
content: '';
position: absolute;
left: 50%;
width: 30%;
top: calc(50% - 3px);
border-radius: 3px;
height: 6px;
background: #262626;
animation: anime 60s linear infinite;
transform-origin: left;
}- Creates a minute hand using ::after.
- Smaller width (30%), thinner than the hour hand.
- Rotates every 60 seconds using:
@keyframes anime {
0% { transform: rotate(-90deg); }
100% { transform: rotate(270deg); }
}- Starts from -90 degrees and rotates to 270 degrees.
4. Center Dot
span{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background: #ff5f5f;
border-radius: 50%;
z-index: 1;
}- Creates a small red dot (#ff5f5f) at the center of the clock.
- Makes sure it stays on top using z-index: 1.
This will give our clock an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body{
margin: 0;
padding: 0;
background: #fff;
}
.clock{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 15px solid #8a5fff;
border-radius: 50%;
background: url(face.png);
background-size: cover;
box-shadow: -2px 2px 0 #e23232,
inset 0 0 20px rgba(0, 0, 0, 0.5);
}
.clock::before{
content: '';
position: absolute;
left: 50%;
width: 40%;
height: 6px;
background: #262626;
top: calc(50% - 3px);
border-radius: 3px;
animation: animate 4s linear infinite;
transform-origin: left;
}
@keyframes animate {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.clock::after{
content: '';
position: absolute;
left: 50%;
width: 30%;
top: calc(50% - 3px);
border-radius: 3px;
height: 6px;
background: #262626;
animation: anime 60s linear infinite;
transform-origin: left;
}
@keyframes anime {
0%{
transform: rotate(-90deg);
}
100%{
transform: rotate(270deg);
}
}
span{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background: #ff5f5f;
border-radius: 50%;
z-index: 1;
} Final Output:
Conclusion:
In conclusion, creating a clock with hour and minute hands using HTML and CSS is a fun and practical project for beginner-level web developers. By following the steps outlined in this tutorial, you can design and customize your own clock with unique styles and animations. With further practice and experimentation, you can improve your HTML and CSS skills and apply them to other projects. So why not give it a try and create your own clock today!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
